<%@page import="cn.util.Const"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>宠物用品管理系统</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="<%=Const.ROOT %>assets/images/favicon.png"/>
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/animate.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/jquery-ui.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/slick.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/chosen.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/pe-icon-7-stroke.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/magnific-popup.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/lightbox.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/js/fancybox/source/jquery.fancybox.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/jquery.scrollbar.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/mobile-menu.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/fonts/flaticon/flaticon.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/style.css">
</head>
<body class="productsgrid-page">
<%@include file="inc/header.jsp" %>
<div class="main-content main-content-details single right-sidebar">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div class="breadcrumb-trail breadcrumbs">
					<ul class="trail-items breadcrumb">
						<li class="trail-item trail-begin">
							<a href="index.html">首页</a>
						</li>
						<li class="trail-item">
							<a href="#">商品列表</a>
						</li>
						<li class="trail-item trail-end active">
							商品详情
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="content-area content-details col-lg-9 col-md-8 col-sm-12 col-xs-12">
				<div class="site-main">
					<div class="details-product">
						<div class="details-thumd">
							<div class="image-preview-container image-thick-box image_preview_container">
								<img id="img_zoom" data-zoom-image="assets/images/details-item-1.jpg" src="assets/images/details-item-1.jpg" alt="img">
								<a href="#" class="btn-zoom open_qv"><i class="fa fa-search" aria-hidden="true"></i></a>
							</div>
						</div>
						<div class="details-infor">
							<h1 class="product-title">
								${goods.name }
							</h1>
							<div class="availability">
								商品库存:
								<a href="#">${goods.kucun }</a>
							</div>
							<div class="price">
								<span>￥${goods.price }元</span>
							</div>
							<div class="product-details-description">
								<ul>
									<li>销量：${goods.xiao }</li>
									<li>${goods.zan }赞</li>
								</ul>
							</div>
							<div class="variations">
								<div class="attribute attribute_color">
									<div class="color-text text-attribute">
										分类:
									</div>
									<div class="list-color list-item">
										${goods.kind.name }
									</div>
								</div>
							</div>
							<div class="group-button">
								<div class="quantity-add-to-cart">
									<div class="quantity">
										<div class="control">
											<a class="btn-number qtyminus quantity-minus" href="#">-</a>
											<input type="text" data-step="1" data-min="0" value="1" id="quantity" title="Qty" class="input-qty qty" size="4">
											<a href="#" class="btn-number qtyplus quantity-plus">+</a>
										</div>
									</div>
									<c:if test="${sessionScope.role==1 }">
										<button class="single_add_to_cart_button button" type="button" onclick="addCart()">添加到购物车</button>
									</c:if>
									<c:if test="${sessionScope.role!=1 }">
										请先登录!
									</c:if>
								</div>
							</div>
						</div>
					</div>
					<div class="tab-details-product">
						<ul class="tab-link">
							<li class="active">
								<a data-toggle="tab" aria-expanded="true" href="#product-descriptions">详情</a>
							</li>
							<li class="">
								<a data-toggle="tab" aria-expanded="true" href="#reviews">评价</a>
							</li>
						</ul>
						<div class="tab-container">
							<div id="product-descriptions" class="tab-panel active">
								<p>
									${goods.content }
								</p>
							</div>
							<div id="reviews" class="tab-panel">
								<div class="reviews-tab">
									<div class="comments">
										<h2 class="reviews-title">
											1 review for
											<span>Areca palm</span>
										</h2>
										<ol class="commentlist">
											<li class="conment">
												<div class="conment-container">
													<a href="#" class="avatar">
														<img src="assets/images/avartar.jpeg" alt="img">
													</a>
													<div class="comment-text">
														<div class="stars-rating">
															<div class="star-rating">
																<span class="star-5"></span>
															</div>
															<div class="count-star">
																(1)
															</div>
														</div>
														<p class="meta">
															<strong class="author">Cobus Bester</strong>
															<span>-</span>
															<span class="time">June 7, 2013</span>
														</p>
														<div class="description">
															<p>Simple and effective design. One of my favorites.</p>
														</div>
													</div>
												</div>
											</li>
										</ol>
									</div>
									<div class="review_form_wrapper">
										<div class="review_form">
											<div class="comment-respond">
												<span class="comment-reply-title">Add a review </span>
												<form class="comment-form-review">
													<p class="comment-notes">
														<span class="email-notes">Your email address will not be published.</span>
														Required fields are marked
														<span class="required">*</span>
													</p>
													<div class="comment-form-rating">
														<label>Your rating</label>
														<p class="stars">
                                        						<span>
                                        							<a class="star-1" href="#"></a>
                                        							<a class="star-2" href="#"></a>
                                        							<a class="star-3" href="#"></a>
                                        							<a class="star-4" href="#"></a>
                                        							<a class="star-5" href="#"></a>
                                        						</span>
														</p>
													</div>
													<p class="comment-form-comment">
														<label>
															Your review
															<span class="required">*</span>
														</label>
														<textarea title="review" id="comment" name="comment" cols="45" rows="8"></textarea>
													</p>
													<p class="comment-form-author">
														<label>
															Name
															<span class="">*</span>
														</label>
														<input title="author" id="author" name="author" type="text" value="">
													</p>
													<p class="comment-form-email">
														<label>
															Email
															<span class="">*</span>
														</label>
														<input title="email" id="email" name="email" type="email" value="" >
													</p>
													<p class="form-submit">
														<input name="submit" type="submit" id="submit" class="submit" value="Submit">
													</p>
												</form>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="sidebar sidebar-details col-lg-3 col-md-4 col-sm-12 col-xs-12">
				<div class="wrapper-sidebar">
					<div class="widget widget-related-products">
						<h3 class="widgettitle">热销商品</h3>
						<div class="slider-related-products owl-slick nav-top-right equal-container"  data-slick ='{"autoplay":false, "autoplaySpeed":1000, "arrows":true, "dots":false, "infinite":true, "speed":800, "rows":1}' data-responsive='[{"breakpoint":"2000","settings":{"slidesToShow":1 }},{"breakpoint":"992","settings":{"slidesToShow":2}}]'>
							<div class="product-item style-1">
								<div class="product-inner equal-element">
									<div class="product-top">
										<div class="flash">
													<span class="onnew">
														<span class="text">
															new
														</span>
													</span>
										</div>
									</div>
									<div class="product-thumb">
										<div class="thumb-inner">
											<a href="#">
												<img src="assets/images/product-item-1.jpg" alt="img">
											</a>
											<div class="thumb-group">
												<div class="yith-wcwl-add-to-wishlist">
													<div class="yith-wcwl-add-button">
														<a href="#">Add to Wishlist</a>
													</div>
												</div>
												<a href="#" class="button quick-wiew-button">Quick View</a>
												<div class="loop-form-add-to-cart">
													<button class="single_add_to_cart_button button">Add to cart
													</button>
												</div>
											</div>
										</div>
									</div>
									<div class="product-info">
										<h5 class="product-name product_title">
											<a href="#">Areca palm</a>
										</h5>
										<div class="group-info">
											<div class="stars-rating">
												<div class="star-rating">
													<span class="star-3"></span>
												</div>
												<div class="count-star">
													(3)
												</div>
											</div>
											<div class="price">
												<del>
													$65
												</del>
												<ins>
													$45
												</ins>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="product-item style-1">
								<div class="product-inner equal-element">
									<div class="product-top">
										<div class="flash">
													<span class="onnew">
														<span class="text">
															new
														</span>
													</span>
										</div>
									</div>
									<div class="product-thumb">
										<div class="thumb-inner">
											<a href="#">
												<img src="assets/images/product-item-2.jpg" alt="img">
											</a>
											<div class="thumb-group">
												<div class="yith-wcwl-add-to-wishlist">
													<div class="yith-wcwl-add-button">
														<a href="#">Add to Wishlist</a>
													</div>
												</div>
												<a href="#" class="button quick-wiew-button">Quick View</a>
												<div class="loop-form-add-to-cart">
													<button class="single_add_to_cart_button button">Add to cart
													</button>
												</div>
											</div>
										</div>
									</div>
									<div class="product-info">
										<h5 class="product-name product_title">
											<a href="#">European Pan Palm</a>
										</h5>
										<div class="group-info">
											<div class="stars-rating">
												<div class="star-rating">
													<span class="star-3"></span>
												</div>
												<div class="count-star">
													(3)
												</div>
											</div>
											<div class="price">
												<del>
													$65
												</del>
												<ins>
													$45
												</ins>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="widget widget-banner">
						<a href="#">
							<img src="assets/images/widget-banner.jpg" alt="img">
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<%@include file="inc/footer.jsp" %>
<script src="<%=Const.ROOT %>assets/js/jquery-1.12.4.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery.plugin-countdown.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery-countdown.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/bootstrap.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/owl.carousel.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/magnific-popup.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/isotope.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery.scrollbar.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery-ui.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/mobile-menu.js"></script>
<script src="<%=Const.ROOT %>assets/js/chosen.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/slick.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery.elevateZoom.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery.actual.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/fancybox/source/jquery.fancybox.js"></script>
<script src="<%=Const.ROOT %>assets/js/lightbox.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/owl.thumbs.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery.scrollbar.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/frontend-plugin.js"></script> 
<script>
function addCart(){
	var quantity=$("#quantity").val();
	$.getJSON("<%=Const.ROOT %>carts",{"action":"add","quantity":quantity,"gid":'${goods.id}'},function(data){
		console.log(data);
		if(data.code==200){
			alert("添加成功!");
		}
	});

}	
</script>
</body>
</html>